<template>
	<!-- 个人认证 -->
	<view class="">
		<cu-custom :bgcolor="'#fff'" />
		<view class="step-box p-2">
			<step :active="active" />
		</view>
		<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'">
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="form" err-show-type="toast">
				<view class="pdf-box p-2">
					<title title="身份信息"></title>
					<view class="pl-2 pr-2">
						<uni-forms-item required label="姓名" name="contacts_name">
							<uni-easyinput type="text" v-model="formData.contacts_name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item required name="id_card_no" label="身份证号" label-width="120">
							<uni-easyinput type="text" v-model="formData.id_card_no" placeholder="请输入身份证号"
								@blur="checkIdCard" />
						</uni-forms-item>
					</view>
					<!-- <view class="upload-box p-2">
						<p class="font-sm text-danger">* 以下所需上传的图片仅支持JPG/PNG格式，图片大小需要5M以内</p>
						<p class="font-sm text-danger">* 证件上文字清晰可识别，全部信息清晰无遮挡，有效期1个月以上</p>
						<view class="id d-flex flex-row j-sb">
							<uploadImage :limit="1" :imageValue="idcardFront" headTitle="身份证正面照片" class="flex-1"
								@imgurl="getIdcardFront" />
							<uploadImage :limit="1" :imageValue="idcardReverse" headTitle="身份证反面照片" class="flex-1"
								@imgurl="getIdcardReverse" />
						</view>
						<view class="id d-flex flex-row j-sb">
							<uploadImage :limit="1" :imageValue="handheld_idcard" headTitle="手持身份证照片" class="flex-1"
								@imgurl="getHandlerIdcard" />
						</view>
						
					</view> -->
					<title title="银行信息"></title>
					<view class="pl-2 pr-2">
						<uni-forms-item label="账户类型" label-width="120">
							<uni-data-checkbox v-model="formData.account_number_type"
								:localdata="items"></uni-data-checkbox>
						</uni-forms-item>
						<!-- <uni-forms-item required label="银行开户名" name="bankUserName" label-width="120">
							<uni-easyinput type="text" v-model="formData.bankUserName" placeholder="请填写开户人真实姓名" />
						</uni-forms-item>
						<uni-forms-item required name="idCard" label="银行账号" label-width="120">
							<uni-easyinput type="number" v-model="formData.bankCard" placeholder="请填写正确银行卡号" />
						</uni-forms-item> -->
						<view class="upload-box p-2">
							<p class="font-sm text-danger">* 以下所需上传的图片仅支持JPG/PNG格式，图片大小需要5M以内</p>
							<view class="id d-flex flex-row j-sb">
								<uploadImage :limit="1" :imageValue="generalTaxpayer" headTitle="银行卡正面照片" class="flex-1"
									@imgurl="getGeneralTaxpayer" />
								<uploadImage :limit="1" :imageValue="generalTaxpayerRear" headTitle="银行卡反面照片"
									class="flex-1" @imgurl="getGeneralTaxpayerRear" />
							</view>
						</view>
					</view>
					<view class="button-box p-2">
						<view class="mb-2 d-flex flex-row">
							<checkbox-group style="width: 20rpx;" @change="handlerChange" class="mr-4">
								<checkbox value="cb" :checked="checked" style="transform:scale(0.7)" />
							</checkbox-group>
							已阅读 <text class="main-text-color" @click="inputDialogToggle(1)">《 用户协议 》</text>及<text
								class="main-text-color" @click="inputDialogToggle(2)">《 隐私政策
								》</text>
						</view>
						<button class="main-bg-color text-white font-md" @click="submit">下一步</button>
					</view>
				</view>

			</uni-forms>

		</scroll-view>
		<uni-popup ref="createTypePopup" type="dialog" :is-mask-click="false">
			<!-- 自定义内容 -->
			<view class="content">
				<scroll-view scroll-y="true" :style="'height:'+scorllPopHeight+ 'px;'">
					<rich-text :nodes="info"></rich-text>
				</scroll-view>
			</view>
			<!-- 自定义按钮 -->
			<view class="buttons">
				<checkbox-group @change="handlerChangeUserPop" v-if="popTitle == '用户协议'">
					<label class="radio">
						<checkbox value="cb" :checked="userChecked" :disabled="userVerifyShow" color="#FD6801"
							style="transform:scale(0.6); border-radius: 100%;" /><text
							v-if="userVerifyShow">( {{seconds}}S )</text>我已阅读并同意以上协议
					</label>
				</checkbox-group>
				<checkbox-group @change="handlerChangeYinsiPop" v-else>
					<label class="radio">
						<checkbox value="cb" :checked="yiciChecked" :disabled="yinsiVerifyShow" color="#FD6801"
							style="transform:scale(0.6); border-radius: 100%;" /><text
							v-if="yinsiVerifyShow">( {{seconds}}S )</text>我已阅读并同意以上协议
					</label>
				</checkbox-group>
				<button @click="confirmAction" :disabled="yinsiVerifyShow">确认</button>
			</view>
			<!-- <uni-popup-dialog ref="createTypeDialog" mode="input" :title="popTitle">
				<scroll-view scroll-y="true" :style="'height:'+scorllPopHeight+ 'px;'">
					<rich-text :nodes="info"></rich-text>
				</scroll-view>
			</uni-popup-dialog> -->
		</uni-popup>
	</view>
</template>

<script>
	import step from "@/components/step/index.vue"
	import title from "@/components/common/title.vue"
	import validate from "@/utils/validate.js"
	import uploadImage from "@/components/common/uploadImage.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			step,
			title,
			uploadImage,
			cuCustom
		},
		data() {
			return {
				active: 1,
				scorllHeight: 500,
				idcardFront: [],
				idcardReverse: [],
				handheld_idcard: [],
				generalTaxpayer: [],
				generalTaxpayerRear: [],
				formData: {
					contacts_name: "", // 姓名
					id_card_no: "", // 身份证号码
					idcard_front: "", // 身份证正面
					idcard_reverse: "", // 身份证反面
					handheld_idcard: "", // 手持身份证
					general_taxpayer: "", // 银行卡正面
					general_taxpayer_rear: "", // 银行卡反面
					account_number_type: 1, // 商户类型  1个人商户 2企业商户
				},
				rules: {
					// 对name字段进行必填验证
					"contacts_name": {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					// 对身份证字段进行必填验证
					"id_card_no": {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						}]
					}
				},
				items: [{
						value: 1,
						text: '个体商户'
					},
					{
						value: 2,
						text: '企业商户'
					}
				],
				checked: false,
				info: "",
				popTitle: "",
				userChecked: false,
				seconds: 10,
				userVerifyShow: true,
				yinsiVerifyShow:true,
				yinsiChecked:false
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(340)
					this.scorllPopHeight = res.windowHeight - uni.upx2px(640)
				})
			})
		},
		methods: {
			// 弹窗显示隐私政策
			inputDialogToggle(val) {
				this.previewFile(val)
				this.popTitle = val == 2 ? "隐私政策" : "用户协议"
				this.$refs.createTypePopup.open()
				this.timeDown(10)
			},
			handlerChangeUserPop(e){
				this.userChecked = !this.userChecked
			},
			handlerChangeYinsiPop(e){
				this.yinsiChecked = !this.yinsiChecked
			},
			confirmAction(){
				this.info = ""
				this.$refs.createTypePopup.close()
			},
			// 倒计时10S
			timeDown(num) {
				let _that = this
				// 计时器清零 按钮可以点击，还原计时数， 清空计数器
				if (num === 0) {
					_that.userVerifyShow = false
					_that.yinsiVerifyShow = false
					_that.seconds = 10
					return clearTimeout()
				} else {
					_that.userVerifyShow = true
					_that.yinsiVerifyShow = true
					setTimeout(() => {
						_that.seconds = num - 1
						_that.timeDown(num - 1)
					}, 1000)
				}
			},
			// 获取上传的身份证正面
			getIdcardFront(value) {
				this.idcardFront = []
				this.formData.idcard_front = value
				this.idcardFront.push({
					url: this.returnImg(value)
				})
			},
			//  获取身份证反面
			getIdcardReverse(value) {
				this.idcardReverse = []
				this.formData.idcard_reverse = value
				this.idcardReverse.push({
					url: this.returnImg(value)
				})
			},
			getHandlerIdcard(value) {
				this.handheld_idcard = []
				this.formData.handheld_idcard = value
				this.handheld_idcard.push({
					url: this.returnImg(value)
				})
			},
			// 获取银行卡正面照
			getGeneralTaxpayer(value) {
				this.generalTaxpayer = []
				this.formData.general_taxpayer = value
				this.generalTaxpayer.push({
					url: this.returnImg(value)
				})
			},
			// 获取银行卡反面照
			getGeneralTaxpayerRear(value) {
				this.generalTaxpayerRear = []
				this.formData.general_taxpayer_rear = value
				this.generalTaxpayerRear.push({
					url: this.returnImg(value)
				})
			},
			returnImg(img) {
				return `${getApp().globalData.baseUrl}/${img}`
			},
			handlerChange(e) {
				this.checked = !this.checked
			},
			// 触发提交表单
			submit() {
				// if(this.formData.idcard_front == "" || this.formData.idcard_reverse == ""){
				// 	uni.showToast({
				// 		title:"请上传身份证照片",
				// 		icon:"none"
				// 	})
				// 	return false
				// }
				// if(this.formData.handheld_idcard == ""){
				// 	uni.showToast({
				// 		title:"请上传手持身份证照片",
				// 		icon:"none"
				// 	})
				// 	return false
				// }
				if (!this.userChecked) {
					uni.showToast({
						title: "请阅读用户协议",
						icon: "none"
					})
					return false
				}
				if (!this.yinsiChecked) {
					uni.showToast({
						title: "请阅读隐私政策",
						icon: "none"
					})
					return false
				}
				if (!this.checked) {
					uni.showToast({
						title: "请勾选阅读用户协议及隐私政策",
						icon: "none"
					})
					return false
				}
				if (this.formData.general_taxpayer == "" || this.formData.general_taxpayer_rear == "") {
					uni.showToast({
						title: "请上传银行卡照片",
						icon: "none"
					})
					return false
				}
				let _that = this
				_that.$refs.form.validate().then(res => {
					uni.setStorage({
						key: "personalInfo",
						data: _that.formData,
						success() {
							uni.navigateTo({
								url: './shopAuth'
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: "表单信息有误，请检查",
						icon: "none"
					})
				})

			},
			checkIdCard() {
				let isIdcard = validate.isValidChineseID(this.formData.id_card_no)
				if (!isIdcard) {
					uni.showToast({
						title: "身份证号码有误请检查",
						icon: 'none'
					})
				}
			},
			// 获取隐私政策
			async previewFile(val) {
				let params = {
					type: val
				}
				uni.showLoading({
					title: '加载中'
				});
				await interceptor.get("/supplier_applet_api.php?act=selProtocol", params).then((res) => {
					this.info = res.info
					uni.hideLoading();
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.step-box {
		background: #F8F8F8;
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;

		checkbox {
			border-radius: 15rpx;
			/* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.upload-box {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}

		.uni-easyinput__content {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-select {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x--border {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x {
			background: transparent !important;
		}
	}

	// 自定义弹样式
	::v-deep .uni-popup__wrapper.center {
		width: 94%;
		// background: #fff !important;
		// border-radius: 8px !important;
		// overflow: hidden;

		.content {
			width: 100%;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;
		}
		.buttons{
			background: #fff;
		}
	}
</style>